<template>
    <div>
        <!-- <h3>预览部门</h3> -->
        <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
            prop="id"
            label="编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
        </el-table-column>

        <el-table-column
            prop="phone"
            label="手机号">
        </el-table-column>
        <el-table-column
            prop="department_name"
            label="部门">
        </el-table-column>
        <el-table-column
            prop="duty_name"
            label="职责">
        </el-table-column>

        </el-table>   

        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pagesize"
            :current-page="page"
            style="text-align: center; margin-top: 10px"
            @current-change="fnGetPage"
            >
        </el-pagination>            
    </div>
</template>

<script>
import {get} from "../../utils/request"
export default {
    data(){
        return{
            tableData:[], // 接受全部部门信息
            total: 0, //  总条目数
            page: 1,    
            pagesize: 5, // 定义变量限制一页显示的条数

        }
    },
    methods:{
        fnGetDep: function(num){
            get("/v1/workers/staff/",{
                params: {
                    page: num,
                }
            })
            .then((res) => {
                console.log("预览员工信息",res)
                this.tableData = res.data.results
                this.total = res.data.count
            }).catch((err) => {
                console.log(err)
            });
        },
        fnGetPage: function(res){
            this.page = res
            this.fnGetDep(this.page)
        }
    },
    mounted(){
        this.fnGetDep(1);
    }
    
}
</script>

<style>

</style>